<html>

<head>
    <meta charset="utf-8">
    <title>数组的状态！！</title>
</head>

<body>
    <div id="app"></div>
    <script src="react/react.js"></script>
    <script src="react/JSXTransformer.js"></script>
	<script type="text/jsx">
		var MessageBox = React.createClass({
			getInitialState:function(){
				return {
					isVisible: true,
					titleMessage: '你好世界（来自state哦）',
				}
			},
			render:function(){	
				var styleObj={
					display: this.state.isVisible ? 'block' : 'none',
				}

				return ( 
					<div>
						<h1 style={styleObj}>{this.state.titleMessage}</h1>
						<Submessage/>
					</div>
				)
			}
		});

		var Submessage = React.createClass({
			render:function(){
				return (
					<h3>写代码很有意思</h3>
				)
			}
		});


		var messageBox = React.render( <MessageBox/>, 
			document.getElementById('app'),
			function(){
				console.log('渲染完成啦！！');
			}
		)


	</script>


</body>

</html>